<!doctype html>
<script src='webp_enc.js'></script>
<script>
  const module = webp_enc();

  async function loadImage(src) {
    // Load image
    const img = document.createElement('img');
    img.src = src;
    await new Promise(resolve => img.onload = resolve);
    // Make canvas same size as image
    const canvas = document.createElement('canvas');
    [canvas.width, canvas.height] = [img.width, img.height];
    // Draw image onto canvas
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0, 0, img.width, img.height);
  }

  module.onRuntimeInitialized = async _ => {
    console.log('Version:', module.version().toString(16));
    const image = await loadImage('../example.png');
    const result = module.encode(image.data, image.width, image.height, {
      quality: 75,
      target_size: 0,
      target_PSNR: 0,
      method: 4,
      sns_strength: 50,
      filter_strength: 60,
      filter_sharpness: 0,
      filter_type: 1,
      partitions: 0,
      segments: 4,
      pass: 1,
      show_compressed: 0,
      preprocessing: 0,
      autofilter: 0,
      partition_limit: 0,
      alpha_compression: 1,
      alpha_filtering: 1,
      alpha_quality: 100,
      lossless: 0,
      exact: 0,
      image_hint: 0,
      emulate_jpeg_size: 0,
      thread_level: 0,
      low_memory: 0,
      near_lossless: 100,
      use_delta_palette: 0,
      use_sharp_yuv: 0,
    });
    console.log('size', result.length);
    const blob = new Blob([result], {type: 'image/webp'});

    module.free_result();

    const blobURL = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = blobURL;
    document.body.appendChild(img);
  };
</script>
